<template>
  <div class="shutdown-statistics">
    <!-- 搜索表单 -->
    <div class="search-form">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="时间范围">
          <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" />
          -
          <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      height="calc(100vh - 180px)"
      :header-cell-style="{ background: '#2a5caa', color: '#fff', padding: '8px 10px', textAlign: 'center', fontWeight: 'normal', border: 'none' }"
      :cell-style="{ padding: '8px 10px', textAlign: 'center', color: '#c0c4cc', border: 'none' }"
      :row-style="{ background: '#0f2142' }"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column label="班组" width="100" align="center">
        <template #default="scope">
          <span>{{ scope.row.shift }} {{ scope.row.team }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="180" align="center" />
      <el-table-column prop="endTime" label="结束时间" width="180" align="center" />
      <el-table-column prop="duration" label="停机时长[min]" width="140" align="center" />
      <el-table-column label="责任归属" width="120" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.responsibility" placeholder="请选择">
            <el-option label="原料" value="原料" />
            <el-option label="生产" value="生产" />
            <el-option label="设备" value="设备" />
            <el-option label="轧机" value="轧机" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="停机大类" width="150" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.mainCategory" placeholder="请选择">
            <el-option label="外部原因" value="外部原因" />
            <el-option label="生产管理" value="生产管理" />
            <el-option label="设备故障" value="设备故障" />
            <el-option label="轧机故障" value="轧机故障" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="停机细分类" width="180" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.subCategory" placeholder="请选择">
            <el-option label="其它小原因素" value="其它小原因素" />
            <el-option label="生产管理-其它" value="生产管理-其它" />
            <el-option label="机械故障" value="机械故障" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注" min-width="300">
        <template #default="scope">
          <el-input v-model="scope.row.remarks" type="textarea" :rows="2" placeholder="请输入备注" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" fixed="right" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row)">提交</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-panel">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      />
    </div>
    <div class="content">
      <div class="chart-container">
        <div class="chart" id="stackedBarChart"></div>
        <div class="chart" id="multiBarChart"></div>
        <div class="chart" id="comparisonChart"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import * as echarts from 'echarts';

  // 搜索表单数据
  const searchForm = reactive({
    startTime: '',
    endTime: '',
  });

  // 表格数据
  const tableData = ref([
    {
      shift: '中',
      team: '丙',
      startTime: '2023-02-14 18:36:55',
      endTime: '2023-02-14 18:39:28',
      duration: 2.55,
      responsibility: '原料',
      mainCategory: '外部原因',
      subCategory: '其它小原因素',
      remarks: '原料与尺寸不符合规范',
    },
    // ... 其他数据
  ]);

  onMounted(() => {
    // 堆叠柱状图
    const stackedBarChart = echarts.init(document.getElementById('stackedBarChart'));
    stackedBarChart.setOption({
      backgroundColor: '#0f2142',
      title: {
        text: '近12个月轧机停机次数-各类停机原因',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['生产', '设备', '原料', '能介', '实验科', '外部', '轧辊', '运转', '总数'],
        textStyle: {
          color: '#fff',
        },
        top: 25,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['2024/06', '2024/07', '2024/08', '2024/09', '2024/10', '2024/11', '2024/12', '2025/01', '2025/02', '2025/03', '2025/04', '2025/05'],
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff',
        },
      },
      series: [
        {
          name: '生产',
          type: 'bar',
          stack: 'total',
          data: [173, 223, 245, 241, 245, 220, 222, 220, 181, 207, 209, 214],
        },
        {
          name: '设备',
          type: 'bar',
          stack: 'total',
          data: [42, 49, 35, 33, 31, 34, 42, 42, 35, 34, 35, 35],
        },
        {
          name: '原料',
          type: 'bar',
          stack: 'total',
          data: [42, 49, 35, 33, 31, 34, 42, 42, 35, 34, 35, 35],
        },
        {
          name: '能介',
          type: 'bar',
          stack: 'total',
          data: [42, 49, 35, 33, 31, 34, 42, 42, 35, 34, 35, 35],
        },
        {
          name: '实验科',
          type: 'bar',
          stack: 'total',
          data: [42, 49, 35, 33, 31, 34, 42, 42, 35, 34, 35, 35],
        },
        {
          name: '外部',
          type: 'bar',
          stack: 'total',
          data: [42, 49, 35, 33, 31, 34, 42, 42, 35, 34, 35, 35],
        },
        {
          name: '轧辊',
          type: 'bar',
          stack: 'total',
          data: [42, 49, 35, 33, 31, 34, 42, 42, 35, 34, 35, 35],
        },
        {
          name: '运转',
          type: 'bar',
          stack: 'total',
          data: [42, 49, 35, 33, 31, 34, 42, 42, 35, 34, 35, 35],
        },
        {
          name: '总数',
          type: 'bar',
          stack: 'total',
          data: [42, 49, 35, 33, 31, 34, 42, 42, 35, 34, 35, 35],
        },
      ],
    });

    // 多柱状图
    const multiBarChart = echarts.init(document.getElementById('multiBarChart'));
    multiBarChart.setOption({
      backgroundColor: '#0f2142',
      title: {
        text: '近12个各班组轧机停机次数',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['总体', '甲', '乙', '丙', '丁'],
        textStyle: {
          color: '#fff',
        },
        top: 25,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['2024/06', '2024/07', '2024/08', '2024/09', '2024/10', '2024/11', '2024/12', '2025/01', '2025/02', '2025/03', '2025/04', '2025/05'],
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff',
        },
      },
      series: [
        {
          name: '总体',
          type: 'bar',
          data: [394, 429, 415, 396, 416, 389, 424, 413, 295, 297, 394, 339],
        },
        {
          name: '甲',
          type: 'bar',
          data: [111, 125, 113, 113, 132, 98, 117, 112, 84, 113, 115, 86],
        },
        {
          name: '乙',
          type: 'bar',
          data: [111, 125, 113, 113, 132, 98, 117, 112, 84, 113, 115, 86],
        },
        {
          name: '丙',
          type: 'bar',
          data: [111, 125, 113, 113, 132, 98, 117, 112, 84, 113, 115, 86],
        },
        {
          name: '丁',
          type: 'bar',
          data: [111, 125, 113, 113, 132, 98, 117, 112, 84, 113, 115, 86],
        },
      ],
    });

    // 对比图
    const comparisonChart = echarts.init(document.getElementById('comparisonChart'));
    comparisonChart.setOption({
      backgroundColor: '#0f2142',
      title: {
        text: '近12个月标准/日历作业率',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['标准作业率', '日历作业率'],
        textStyle: {
          color: '#fff',
        },
        top: 25,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['2024/06', '2024/07', '2024/08', '2024/09', '2024/10', '2024/11', '2024/12', '2025/01', '2025/02', '2025/03', '2025/04', '2025/05'],
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff',
          formatter: '{value}%',
        },
      },
      series: [
        {
          name: '标准作业率',
          type: 'bar',
          data: [80.52, 84.41, 85.93, 87.8, 87.89, 84.17, 93.3, 89.34, 92.95, 82.35, 83.12, 77.15],
        },
        {
          name: '日历作业率',
          type: 'bar',
          data: [76.97, 79.82, 82.8, 84.07, 84.17, 80.3, 89.76, 84.89, 90.05, 79.81, 78.81, 77.15],
        },
      ],
    });

    // 响应式处理
    window.addEventListener('resize', () => {
      stackedBarChart.resize();
      multiBarChart.resize();
      comparisonChart.resize();
    });
  });

  // --- Pagination ---
  const pagination = reactive({
    currentPage: 1,
    pageSize: 50,
    total: tableData.value.length,
  });

  // 搜索方法
  const handleSearch = () => {
    // TODO: 实现搜索逻辑
  };

  // 重置方法
  const handleReset = () => {
    searchForm.startTime = '';
    searchForm.endTime = '';
  };

  // 导出方法
  const handleExport = () => {
    // TODO: 实现导出逻辑
  };

  // 编辑方法
  const handleEdit = (row: any) => {
    // TODO: 实现编辑逻辑
  };
</script>

<style scoped>
  .shutdown-statistics {
    background-color: #0a1a3a;
    color: #c0c4cc;
    padding: 10px;
    height: 100%;
    /* Use 100% for layout within router-view */
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    font-size: 13px;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: #3a5a8a #142a52;
    display: flex;
    flex-direction: column;
  }

  .search-form {
    background-color: #1c2d5a;
    padding: 10px 15px;
    border-radius: 3px;
    flex-shrink: 0;
  }

  :deep(.custom-date-picker.el-date-editor) {
    width: 260px !important;
    /* Match LayOutJudge */
    height: 28px;
    background-color: #0a1a3a;
    border: 1px solid #3a5a8a;
    box-shadow: none;
  }

  :deep(.el-form-item__label) {
    color: #c0c4cc;
    white-space: nowrap;
    min-width: 65px;
    /* Match LayOutJudge */
    text-align: right;
  }

  :deep(.el-table__header) th {
    background-color: var(--el-color-primary-light-9);
  }

  :deep(.el-input__wrapper) {
    width: 180px;
  }

  :deep(.el-date-editor.el-input) {
    width: 180px;
  }

  :deep(.el-table),
  :deep(.el-table__body),
  :deep(.el-table__header-wrapper),
  :deep(.el-table__body-wrapper) {
    background-color: #1c2d5a !important;
  }
  :deep(.el-table__empty-block) {
    background: linear-gradient(135deg, #183c7e 0%, #0a1a3a 100%) !important;
  }
  :deep(.el-table th),
  :deep(.el-table td) {
    background-color: #1c2d5a !important;
  }
  :deep(.el-table__body tr) {
    background-color: #1c2d5a !important;
  }
  :deep(.el-table__body tr:hover > td) {
    background-color: #223a6b !important;
  }

  :deep(.el-table--border .el-table__inner-wrapper::after),
  :deep(.el-table--border::after),
  :deep(.el-table--border::before),
  :deep(.el-table__border-left-patch),
  :deep(.el-table--border .el-table__inner-wrapper::before) {
    z-index: -1;
  }

  :deep(.el-table td.el-table__cell),
  :deep(.el-table th.el-table__cell.is-leaf) {
    border-bottom: 1px solid #06279d !important;
  }
  :deep(.el-table--border td.el-table__cell),
  :deep(.el-table--border th.el-table__cell) {
    border-right: 1px solid #06279d !important;
    border-bottom: none;
  }

  /* --- Pagination Panel (Styles should be consistent) --- */
  .pagination-panel {
    background-color: #1c2d5a;
    padding: 8px 15px;
    border-radius: 3px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
  }
  :deep(.el-pagination) {
    background-color: transparent !important;
  }
  :deep(.el-pagination__total),
  :deep(.el-pagination__sizes),
  :deep(.el-pagination__jump),
  :deep(.el-pagination__editor),
  :deep(.el-pagination button),
  :deep(.el-pager li) {
    background-color: #1c2d5a !important;
    color: #7ec7ff !important;
    border: none !important;
  }
  :deep(.el-pager li.is-active) {
    background-color: #2979ff !important;
    color: #fff !important;
  }

  :deep(.custom-date-picker.el-date-editor) {
    width: 260px !important;
    /* Match LayOutJudge */
    height: 28px;
    background-color: #0a1a3a;
    border: 1px solid #3a5a8a;
    box-shadow: none;
  }

  .custom-input,
  .custom-select,
  .range-input,
  :deep(.el-input__wrapper),
  :deep(.el-select__wrapper) {
    height: 28px;
    line-height: 28px;
    background-color: #0a1a3a !important;
    border: 1px solid #3a5a8a !important;
    border-radius: 3px !important;
    color: #c0c4cc !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }

  :deep(.custom-select .el-select__placeholder),
  :deep(.custom-select .el-select__caret) {
    color: #c0c4cc;
  }
  .shutdown-statistics > *:not(:last-child) {
    margin-bottom: 15px;
  }
  :deep(.el-input__wrapper) {
    width: 100%;
  }

  :deep(.el-select) {
    width: 100%;
  }

  .content {
    flex: 1;
    padding: 20px;
  }

  .chart-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .chart {
    width: 100%;
    height: 300px;
    background-color: #0f2142;
    border-radius: 4px;
  }
</style>
